import request from "@/utils/request"
import { Button, Space } from "antd"
import React, { useEffect, useState } from "react"
import styles from '../index.less'


function getLuckies() {
  return request(`/api/lucky/list?pageSize=20&page=1`)
}

export type CardListProps = {
  type?: string
  onClick: (it: any) => void
  onSetting: (it: any)=> void

}

function useCardList(props: CardListProps) {

  const [luckies, setLuckies] = useState<Array<any>>([])


  useEffect(() => {
    getLuckies().then(ls => {
      setLuckies(ls.data.list)
    })
  }, [])
  return {
    luckies
  }
}

export function CardLisrt(props: CardListProps) {

  const { luckies } = useCardList(props)
  return (
    <div className={styles.container}>
      {luckies.map(l => (
        <div className={styles.item}>
          <div className={styles.img}>
            <img src={l.banner} />
          </div>
          <div className={styles.title}>
            {l.title}
            <Space>
            <Button type="link" onClick={() => {
              props.onClick(l)
            }}>预览</Button>
              <Button type="link" onClick={() => {
              props.onSetting(l)
            }}>配置</Button>
            </Space>
          
          </div>
        </div>
      ))}
    </div>
  )
}